<script>
  init({
    title: 'Export',
    desc: 'Use Plugin: <a href="https://github.com/hhurz/tableExport.jquery.plugin" target="_blank">tableExport.jquery.plugin</a> and bootstrap-table-export.',
    links: [
      'bootstrap-table.min.css'
    ],
    scripts: [
      'https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js',
      'https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js',
      'https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js',
      'bootstrap-table.min.js',
      'extensions/export/bootstrap-table-export.min.js'
    ]
  })
</script>

<style>
#toolbar {
  margin: 0;
}
</style>

<div id="toolbar" class="select">
  <select class="form-control">
    <option value="">Export Basic</option>
    <option value="all">Export All</option>
    <option value="selected">Export Selected</option>
  </select>
</div>

<table id="table"
  data-show-export="true"
  data-pagination="true"
  data-side-pagination="server"
  data-click-to-select="true"
  data-toolbar="#toolbar"
  data-show-toggle="true"
  data-show-columns="true"
  data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
</table>

<script>
  var $table = $('#table')

  function mounted() {
    $('#toolbar').find('select').change(function () {
      $table.bootstrapTable('destroy').bootstrapTable({
        exportDataType: $(this).val(),
        exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
        columns: [
          {
            field: 'state',
            checkbox: true,
            visible: $(this).val() === 'selected'
          },
          {
            field: 'id',
            title: 'ID'
          }, {
            field: 'name',
            title: 'Item Name'
          }, {
            field: 'price',
            title: 'Item Price'
          }
        ]
      })
    }).trigger('change')
  }
</script>
